<template>
  <div>
    <el-select v-model="computedType" class="width240" size="small" @change="changeType">
      <el-option
        v-for="item in typeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
    </el-select>
  </div>
</template>
<script>
// import { showModal } from '@/utils/message';
import { basicComponents } from '../config';
export default {
  name: 'SwitchType',
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    };
  },
  computed: {
    typeOptions() {
      return [
        { label: '单选框', value: 'radio' },
        { label: '下拉选择框', value: 'select' }
      ];
    },
    computedType: {
      get() {
        return this.selectWidget.type;
      },
      set(val) {
      }
    }
  },
  methods: {
    changeType(type) {
      // showModal(`组件切换后字段配置将发生改变 <br/> 请谨慎操作`, '', { dangerouslyUseHTMLString: true }).then(_ => {
      this.selectWidget.type = type;
      const curTypeConfig = basicComponents.find(i => i.type === type);
      if (curTypeConfig) {
        Object.keys(curTypeConfig.options).forEach(key => {
          // 如果当前组件没有目标组件的属性，需要赋予初值
          if (!Object.hasOwnProperty.call(this.selectWidget.options, key)) {
            this.$set(this.selectWidget.options, key, curTypeConfig.options[key]);
          }
        });
      }
      // });
    }
  }
};
</script>
<style scoped lang="scss">
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
</style>
